<template>
  <!-- productType == 13?goToProductDetail() -->
  <div
    v-if="!isfilter"
    class="productItem"
    @click="getProductDetail(info)"
    :class="{type9:productType === 9||productType === 10||productType == 13||productType == 14,
      'type13':productType == 13,'type14':productType == 14,'grouptype':grouptype==1,'grouptypeBox':grouptype==2,'bordBox':productType == 10}"
    ref="productUnit"
  >
    <template
      v-if="productType !=9 && productType !=10 && productType !=11&& productType !=3&& productType !=13&& productType !=14"
    >
      <div class="product_img" :class="{'soldout':info.soldout}">
        <!--  ref="product_img" -->
        <img v-lazy="https(info.mainpic[0])" alt>
        <label></label>
        <div
          v-if="(info.platformactivityicon || activityImg) && info.producttype ==7"
          class="activityicon"
        >
          <img width="100%" :src="activityImg?activityImg:info.platformactivityicon|https" alt>
        </div>
        <span
          class="logo_prod"
          :class="{'beeIcon':info.producttype ==5,'discountIcon':info.discountoff>0&&info.producttype!=7,'saleIcon':info.producttype == 7 && !info.platformactivityicon && !activityImg,'ghostIcon':info.producttype == 2 &&productType != 1,'delGhostIcon':guishiIconType}"
        ></span>
        <span class="discount_num font-price" v-if="info.discountoff>0&&info.producttype!=7">{{info.discountoff}}%</span>
        <!-- <div
          class="findSim_mask"
          @click.stop="findSimilarHide"
          :class="{findSimAnimate:classFindSim==0}"
          rel="findSimMask"
          v-if="isFindSim&&productType!=20"
        >
          # v-show="info.isc2c == 0"
          # 找相似按钮
          <div class="findSim_wrap flex-center flex-col">
            <div class="findSim" @click.prevent.stop="goSimil(info.id)">
              <span class="center">找相似</span>
            </div>
            <div v-if="info.isc2c == 0" class="addSim" @click.prevent.stop="goFavor(info)">
              <span class="center">收藏</span>
            </div>
          </div>
        </div>-->
      </div>
      <p class="product_name" style="-webkit-box-orient: vertical;" v-if="productType==20">{{info.name}}</p>
      <div class="exchange-price" v-if="productType==20&&isFindSim&&info.exchange">
        <div class="flex ">
          <div class="exchange-bull" :style="info.positive?'color:#0AB978':'color:#FA4B4B'">{{info.bull}}</div>
          <div class="ic_product_more"  @click.stop="openSim">
            <img src="/static/img/ic_product_more.png">
          </div>
        </div>
        <div class="flex-between ">
          <productPrice :prodInfos="info" :prodType="productType" ></productPrice>
          <div class="exchange-pay-number">{{info.paynumber||0}}人付款</div>
        </div>
      </div>
      <div v-else>
        <productPrice :prodInfos="info" :prodType="productType" :upStyle="upStyle"></productPrice>
        <p class="flex-between sale-count" v-if="productType==20&&isFindSim">
          <span>{{info.paynumber||0}}人付款</span>
          <span class="point" @click.stop="openSim">
            <i>•</i>
            <i>•</i>
            <i>•</i>
          </span>
        </p>
      </div>


      <div
        class="findSim_mask"
        @click.stop="findSimilarHide"
        :class="{findSimAnimate:classFindSim==0}"
        v-if="isFindSim"
      >
        <!-- rel="findSimMask" v-show="info.isc2c == 0" -->
        <!--找相似按钮-->
        <div class="findSim_wrap flex-center flex-col">
          <div class="findSim" @click.prevent.stop="goSimil(info.id,info.isc2c)">
            <span class="center">找相似</span>
          </div>
          <div v-if="info.isc2c == 0" class="addSim" @click.prevent.stop="goFavor(info)">
            <span class="center">收藏</span>
          </div>
        </div>
      </div>
      <div class="product_names">
        <!-- productType == 1|| -->
        <template
          v-if="productType ==0||  productType == 4||productType == 5|| productType == 6 || productType ==7 || productType ==8 || productType ==12"
        >
          <brandName :bName="info.brandname" :upStyle="upStyle"></brandName>
        </template>
        <template v-if="productType == 1">
          <brandName :bName="info.brandname" :upStyle="upStyle"></brandName>
          <productName :pName="info.name"></productName>
        </template>
        <template v-if="productType == 5|| productType ==7|| productType ==8|| productType ==12">
          <productName :pName="info.name"></productName>
        </template>
        <template
          v-if="productType == 0 || productType == 2|| productType == 4||productType == 5|| productType == 6 || productType ==12"
        >
          <businessName
            v-if="info.businessname&&!(insq&&productType!==2)"
            :BusName="info.businessname"
            :BusType="info.businesstype"
            :upStyle="upStyle"
          ></businessName>
        </template>
      </div>
    </template>

    <template v-else>
      <template v-if="productType == 11">
        <div class="product_img" :class="{'soldout':info.soldout}">
          <!--  ref="product_img" -->
          <img v-lazy="https(info.mainpic[0])" alt>
          <label></label>
        </div>
        <p class="prod_honeyPrice font-price">
          <template v-if="!info.isallexchange">¥{{info.price}}+</template>
          <em></em>
          {{info.bees}}
        </p>
        <div class="product_names">
          <brandName :bName="info.brandname" :upStyle="upStyle"></brandName>
          <businessName v-if="!insq" :BusName="info.businessname" :upStyle="upStyle" :BusType="info.businesstype"></businessName>
        </div>
      </template>
      <!-- 拼团 -->
      <template v-else-if="productType === 13">
        <div class="ImgWrap">
          <img :src="https(info.mainpic[0])" alt>
        </div>
        <div class="textWrap">
          <div class="product_names">
            <brandName :bName=" info.brandname" :upStyle="upStyle"></brandName>
            <productName :pName="info.name"></productName>
            <productPrice1 :prodInfos="info" :prodType="productType" ></productPrice1>
            <!-- 买手店 -->
            <businessName v-if="!insq" :BusName="info.businessname" :upStyle="upStyle" :BusType="info.businesstype"></businessName>
            <P class="pin">
              <span class="pnu" :class="grouptype==1?'red':''">{{info.teamlimitcount}}人团</span>
              <span v-if="info.teamtotalcount>=10">已团{{info.teamtotalcount}}件</span>
              <span v-else>NEW</span>
            </P>
          </div>
        </div>
        <div class="gototuan" v-if="grouptype!=1">
          <div class="goContent">
            <div class="headImg" v-if="info.teamtotalcount>=10">
              <!-- <img src="/static/img/icon_bees.png" alt="">
                  <img src="/static/img/icon_bees.png" alt="">
              <img src="/static/img/icon_bees.png" alt="">-->
              <img v-for="(item,i) in info.users" :key="i" :src="item" alt>
            </div>
            <span>去开团</span>
          </div>
        </div>
      </template>
      <!-- 助力砍价 -->
      <template v-else-if="productType === 14">
        <div class="ImgWrap">
          <img :src="https(info.mainpic[0])" alt>
        </div>
        <div class="textWrap">
          <div class="product_names">
            <brandName :bName=" info.brandname" :upStyle="upStyle"></brandName>
            <productName :pName="info.name"></productName>
            <productPrice1 :prodInfos="info" :prodType="productType"></productPrice1>
            <!-- 买手店 -->
            <businessName v-if="!insq" :BusName="info.businessname" :upStyle="upStyle" :BusType="info.businesstype"></businessName>
            <P class="pin">
              <span class="pnu" :class="grouptype==1?'red':''">{{info.teamlimitcount}}人团</span>
              <span v-if="info.teamtotalcount>=10">已团{{info.teamtotalcount}}件</span>
              <span v-else>NEW</span>
            </P>
          </div>
        </div>
        <div class="gototuan" v-if="grouptype!=1">
          <div class="goContent">
            <span>邀请好友</span>
          </div>
        </div>
      </template>
      <template v-else-if="productType == 3">
        <div class="product_img" :class="{'soldout':info.soldout}">
          <!--  ref="product_img" -->
          <img v-lazy="https(info.mainpic[0])" alt>
          <label></label>
          <div
            v-if="(info.platformactivityicon || activityImg) && info.producttype ==7"
            class="activityicon"
          >
            <img width="100%" :src="activityImg?activityImg:info.platformactivityicon|https" alt>
          </div>
        </div>
        <productPrice1 :prodInfos="info" :prodType="productType"></productPrice1>
        <div class="product_names" style="text-align:left;">
          <div class="businessName">
            <brandName1 :bName="info.brandname"></brandName1>
            <productName :pName="info.name"></productName>
            <!-- <businessName v-if='!insq' :BusName="info.brandname" :BusType="info.producttype"></businessName> -->
          </div>
        </div>
      </template>
      <template v-else>
        <div class="ImgWrap">
          <img :src="https(info.mainpic[0])" alt>
        </div>
        <div class="textWrap">
          <div class="product_names">
            <p v-if="productType == 10" class="prod_honeyPrice font-price">
              <template v-if="!info.isallexchange">¥{{info.price}}+</template>
              <em></em>
              {{info.bees}}
            </p>
            <brandName :bName="info.brandname" :upStyle="upStyle"></brandName>
            <template v-if="productType == 9">
              <productName :pName="info.name"></productName>
            </template>
            <template v-if="productType ==9">
              <productPrice :prodInfos="info" :prodType="productType" :upStyle="upStyle"></productPrice>
            </template>
            <businessName v-if="!insq" :BusName="info.businessname" :upStyle="upStyle" :BusType="info.businesstype"></businessName>
          </div>
        </div>
      </template>
    </template>
  </div>
</template>
<script>
import { FavorProduct } from "../../common/api/userFavor";
import { mapGetters } from "vuex";

const FindSimHandleName = "_product_findsim";

export default {
  name: "ProductUnit",
  props: {
    productItem: { type: Object }, // 传数组
    productType: { type: Number, default: 0 },
    grouptype: { type: Number, default: 0 }, // 1 拼团详情 头部产品样式模板  2 是‘其他潮人还在拼这些潮品’样式模板
    activityImg: { type: String, default: null },
    guishiIcon: { type: Number, default: 0 },
    // isActivity:{type:Boolean,default:false},
    isFindSim: { type: Number, default: 0 }, // 找相似；0：不需要触发；1：触发
    issearchclick: { type: Number, default: 0 }, // 搜索结果页 数据上报 1 搜索结果商品 进入 0 正常商品
    qzone: { type: Boolean, default: false },
    upStyle:{type:Boolean,default:false},
  },
  data() {
    return {
      classFindSim: -1,
      time: null,
      guishiIconType: false
    };
  },
  components: {
    brandName: {
      template: `<p class='ellipsis brand_name' :style="upStyle?'text-align:center;font-family:DINOT-CondBlack;font-size:12px;':'text-align:left;'">{{bName}}</p>`,
      props: {
        bName: { type: String },
        upStyle:{type:Boolean,default:false}
      }
    },
    brandName1: {
      template: `<p class='ellipsis brand_name' style="text-align:left;padding:0;">{{bName}}</p>`,
      props: {
        bName: { type: String }
      }
    },
    productName: {
      template: `<p class="ellipsis product_name">{{pName}}</p>`,
      props: {
        pName: { type: String }
      }
    },
    businessName: {
      // template: `<p class="ellipsis business_name"><span class="mall_brandShop" :class="{mall_buyers:BusType==2}">{{nameShop}}</span>{{BusName}}</p>`,
      template: `<p v-if="!upStyle" class="ellipsis business_name"><i :class="typeClass"></i>{{BusName}}</p>`,
      props: {
        BusName: { type: String },
        BusType: { type: Number },
        upStyle:{type:Boolean,default:false},

      },
      computed: {
        // nameShop() {
        //   return this.BusType == 1 ? '品牌店' : '买手店'
        // }
        typeClass() {
          let typeClass = "";
          switch (this.BusType) {
            case 1: // 官方店
              typeClass = "ico-sp-official";
              break;
            case 2: // 买手店
              typeClass = "ico-sp-buy";
              break;
            case 3: // 专营店
              typeClass = "ico-sp-store";
              break;
          }
          return typeClass;
        }
      }
    },
    productPrice: {
      template: `<p class="ellipsis product_price  font-price"   :style="upStyle?'text-align:center;font-size:15px;margin-bottom:0;':'text-align:left;'" :class="{pc2c: prodInfos.isc2c==1&&(!prodInfos.exchange),exhange: prodInfos.exchange }">
                  <span v-if='prodInfos.salestatus!=1&&prodInfos.salestatus!=3 && prodInfos.isc2c==0 && prodType!=20'>???</span>
                  <span v-if="!prodInfos.unOpen&&prodInfos.specialprice!=0&&prodInfos.specialprice!=prodInfos.saleprice&&prodType!=1" >
                  ¥{{(prodInfos.specialprice)}}
                  </span>
                  <span :class='{gui:prodInfos.special}'>¥{{(prodInfos.saleprice?prodInfos.saleprice:' ——')}}</span>
                </p>`,
      props: {
        prodInfos: {},
        prodType: { type: Number },
        upStyle:{type:Boolean,default:false},
        exchangeStyle:{type:Boolean,default:false}
      }
    },
    // prodInfos.unOpen
    productPrice1: {
      template: `<p class="ellipsis product_price font-price"  style="text-align:left;padding:0;">
        <span v-if='prodInfos.salestatus!=1&&prodType==1'>???</span>
        <span v-if="!prodInfos.unOpen&&prodInfos.specialprice!=0&&prodInfos.specialprice!=prodInfos.saleprice&&prodType!=1" >
        ¥{{(prodInfos.specialprice)}}</span>
        <span :class='{gui:prodInfos.special}' v-if='this.productType!=13'>¥{{(prodInfos.saleprice) }}
        </span>
        </p>`,
      props: {
        prodInfos: {},
        prodType: { type: Number }
      }
    }
  },
  mounted() {
    let _ = this;
    if (_.isFindSim === 1) _.findSimilar();

    if (_.guishiIcon === 1) _.guishiIconType = true;
  },
  computed: {
    ...mapGetters({
      insq: "insq",
      localUserInfos: "userInfo",
      baseValue: "baseValue"
    }),
    info: function() {
      // pstatus:0正常1未开始2已经卖完 productType
      // productType: 0默认正常全展示商品，1:鬼市产品 ,2品牌商品,3潮店商品,4分类页商品,5折扣商品 6详情推荐商品 7潮店店铺详情商品 8 潮店折扣商品 9.找相似(左图右文布局) 10.牛币兑换（左图右文）11:牛币商城 产品列表  12.找相似推荐商品13.拼团  20 新商城首页
      // producttype: 0 普通,1 限 ,2 特卖/ 市,4 促销折扣,5 牛币兑换,6 签到领取,7 平台大促
      let info = this.productItem;
      var ty = typeof info.mainpic;
      if (info && ty === "string") {
        info.mainpic = info.mainpic.split("|");
      }

      info.unOpen = false;
      if (
        info.specialprice &&
        info.specialprice > 0 &&
        info.specialprice !== info.saleprice
      ) {
        info.realprice = info.specialprice;
        info.special = true;
        if (info.producttype === 7 && info.salestatus === 2) {
          info.unOpen = true; // 平台大促 状态
        }
      } else {
        info.special = false;
        info.realprice = info.saleprice;
      }
      if (info.realprice) {
        info.realprice = info.realprice;
      }

      if(info.isc2c&&info.minprice==0) info.saleprice ='— —'
      return info;
    },
    isfilter() {
      let _ = this,
        { id } = _.productItem,
        base = _.baseValue,
        filter = false;
      if (_.insq && base && base.configs && base.configs.filtergoodsinfront)
        filter = base.configs.filtergoodsinfront.indexOf(id) > -1;
      // console.log("=====>filter", id, filter)
      return filter;
    }
    // localUserInfos() {
    //   return JSON.parse(localStorage.getItem('currentUser'))
    // }
  },
  methods: {
    findSimilar() {
      // 找相似.长按事件
      let _ = this;
      // let productImg = _.$refs.product_img;
      let productUnit = _.$refs.productUnit;
      // let time = null
      if (!productUnit) return;

      productUnit.addEventListener(
        "touchstart",
        () => {
          // 互斥关闭其他找相似蒙层
          _.$parent.$children.forEach(i => {
            if (i != _) i.classFindSim = -1;
          });

          if (_.isFindSim === 1) {
            _.time = setTimeout(() => {
              _.classFindSim = 0;
            }, 400);
          }
        },
        false
      );
      productUnit.addEventListener(
        "touchmove",
        () => {
          clearTimeout(_.time);
        },
        false
      );
      productUnit.addEventListener(
        "touchend",
        () => {
          clearTimeout(_.time);
        },
        false
      );
    },
    openSim() {
      this.classFindSim = 0;
    },
    // 拼团
    // goToProductDetail(id) {
    //   console.log("拼团");
    //   this.$router.push({
    //     path: "/productDetail/"+id
    //   });
    // },
    findSimilarHide(ev) {
      clearTimeout(this.time);
      this.classFindSim = -1;
    },
    goSimil(id, isc2c) {
      this.$router.push(`/ProductSimil/${id}?t=${isc2c}`);
    },
    goFavor(item) {
      let _ = this;
      // console.log(item);
      // _.findSimilarHide()
      if (_.localUserInfos && _.localUserInfos.token) {
        var postData = {
          productid: item.id
        };
        // console.log('收藏参数', postData)
        FavorProduct(postData)
          .then(res => {
            // console.log(res);
            _.toast("收藏成功");
            _.findSimilarHide();
          })
          .catch(err => {
            console.error("FavorProduct err", err);
            _.toast("收藏失败");
            // _.toast(err.msg)
          });
      } else {
        // if (_.$root.ISWX) {
        //   _.$router.push('/wxlogin')
        // } else {
        //   _.$router.push('/login')
        // }
        _.$router.push("/login");
      }
    },
    getProductDetail(proitem) {
      console.log('proitem',proitem)
      // return
      let id = proitem.id;
      let isc2c = proitem.isc2c;
      if (isc2c == 1) {
        return this.$router.push("/sneaker/detail/" + id +(proitem.requestid?'?rq='+proitem.requestid:''))
      }
      const qzoneProxy = process.env.GS_DONMIN; // 'https://1105091322.urlshare.cn'
      const adChannel = "ADTAG";
      let url = "/productDetail/" + id;
      if (this.insq) {
        if (this.qzone) {
          this.qzoneGo(url);
          return;
        } else {
          // 20180414 列表商品跳转增加qzone代理跳转方式
          if (window.mqq) {
            url =
              qzoneProxy +
              url +
              "?_proxy=1&pf=wanba_ts.106" +
              "&" +
              adChannel +
              "=qzone";
            window.mqq.invoke("ui", "openUrl", {
              url: url,
              // 0为当前webview打开,1为新的webview打开,2为外部浏览器打开
              target: 1,
              // 0: 顶部标题栏模式（无底部工具栏）,1: 顶部标题栏无分享入口（无底部工具栏）,2: 底部工具栏模式（顶部标题依然会存在）,3: 底部工具栏模式且顶部无分享入口（顶部标题依然会存在）
              style: 0
            });
            return;
          }
        }
      }
      this.$router.push({
        path: url,
        query: {
          issearchclick: this.issearchclick,
          requestid: proitem.requestid?proitem.requestid:''
        }
      });
      // this.insq ? this.qzoneGo(url) : this.$router.push(url)
    }
  }
};
</script>
<style scoped>

.productItem {
  background: #fff;
  position: relative;
}
/*找相似*/
.findSim_mask {
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.61);
  transform: scale(0, 0);
  z-index: 3;
}
.findSimAnimate {
  transform: scale(1, 1);
  transition: transform 0.3s;
}
.findSim_mask .findSim_wrap {
  margin: 0 auto;
  width: 40%;
  height: 100%;
  /* justify-content: space-around; */
}
.findSim_mask .findSim,
.findSim_mask .addSim {
  /* width: 100%;
  height: 44.45%; */
  width: 16vw;
  height: 16vw;
  border-radius: 50%;
  font-size: 13px;
  /* color: #333; */
  font-weight: 500;
  color: #fff;
  position: relative;
  margin: 12px 0;
}
.findSim_mask span {
  display: block;
  width: 100%;
  text-align: center;
  height: 20px;
  line-height: 20px;
}

.findSim_mask .addSim {
  /* background: white; */
  background: #ff6828;
}
.findSim_mask .findSim {
  /* background: #ffc700; */
  background: #707afc;
}
/**/
.productItem {
  box-sizing: border-box;
  margin-bottom: 13px;
}
.productItem.bordBox {
  border: 1px solid #f2f2f2;
}
.logo_prod {
  display: inline-block;
  position: absolute;
  z-index: 1;
  width: 42px;
  height: 38px;
  border-radius: 50%;
  right: 2px;
  top: 5px;
  background-size: 40px;
}
.logo_prod.beeIcon {
  background-image: url(/static/img/prod_honey.png);
}
.logo_prod.ghostIcon {
  background-image: url(//files.eyee.com/mcdn/static/img/prod_ghost.png);
}
.logo_prod.delGhostIcon {
  background: none;
}
.logo_prod.discountIcon {
  background-size: 42px 38px;
  background-image: url(//files.eyee.com/mcdn/static/img/prod_discount.png);
}
.logo_prod.saleIcon {
  background-size: 42px 38px;
  background-image: url(//files.eyee.com/mcdn/static/img/prod_sale.png);
}
.discount_num {
  display: inline-block;
  position: absolute;
  width: 42px;
  height: 20px;
  line-height: 20px;
  font-weight: 600;
  text-align: center;
  right: 2px;
  top: 8px;
  z-index: 2;
  font-size: 13px;
  color: #ffc700;
}
.productItem .product_img {
  width: 100%;
  overflow: hidden;
  height: 0px;
  padding-bottom: 100%;
  /*margin: 0;*/
  position: relative;
  margin: 0 0 5px 0;
}
/* .puzzle .productItem {
  margin: 0 1% 1% 1%;
  margin-bottom: 10px;
}
.puzzle .productItem .product_img{
    width: 40%;
} */
.product_img .activityicon {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* height: 25px; */
  z-index: 1;
}
.product_img img {
  display: block;
}
.businessName p {
  float: left;
}
.businessName p:nth-child(2) {
  width: 90%;
}
.productItem p {
  text-align: left;
  margin: 0;
  width: 100%;
}
.productItem p span.product_pri{
  font-size: 20px;
  /* text-align: center;
  font-size:15px; */
  /* font-family:DINOT-CondBlack; */
  /* font-weight:normal; */
  /* color:rgba(51,51,51,1); */
  /* line-height:20px; */
}
.productItem p.product_price {
  /* padding: 0 5px; */
  text-align: left;
  font-size: 14px;
   margin-bottom:  4.2667vw;
}
.brand_name,
.product_name,
.business_name {
  font-size: 0.55rem;
  /* padding: 0 5px; */
  margin: 2px 0;
}
.brand_name {
  color: #333;
  font-weight: 600;
}
.product_name {
  color: #333;
  font-weight:600;
   overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
   height:30px;
}
.productItem p.pc2c {
  margin-bottom: 4.2667vw;
}
.exhange{
  font-size:24px !important;
  /* font-family:PingFangSC-Semibold; */
  font-weight:600;
  margin-bottom: 0;
}
.business_name {
  color: #a5a5a5;
}
.product_price {
  font-size: 0.94rem;
  color: #333;
}

.bigItem {
  padding: 15px;
}
.logo_head {
  width: 85%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px auto 0;
}
.Info_logo {
  width: 90%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.Info_logo div {
  font-size: 0.875rem;
  width: 75%;
}
.fev {
  text-align: center;
  position: absolute;
  right: 0;
  font-size: 0.75rem;
  color: #999;
}
.fev span {
  display: block;
  width: 20px;
  height: 20px;
  background-size: 100%;
  margin: 0 auto;
}
.Info_logo img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid #f2f2f2;
  margin-right: 15px;
}
.bigItem .product_name,
.bigItem .brand_name {
  font-size: 0.875rem;
  color: #333;
  text-align: left;
  padding: 0;
}
.bigItem .product_name {
  font-size: 0.75rem;
  color: #999;
}
.bigItem .product_price {
  width: 85%;
  background-color: #333;
  color: #fff;
  text-align: center;
  margin: 20px auto 0;
  border-radius: 5px;
  font-size: 0.875rem;
  height: 38px;
  line-height: 38px;
  font-size: 18px;
}

/*传入type9 的样式*/
.type9 {
  position: relative;
  display: flex;
  width: 100%;
  /* height:150px; */
  padding: 8px;
  background: #fff;
  margin-bottom: 0;
}
.type9 .ImgWrap {
  position: relative;
  width: 35%;
  /* padding-bottom: 26%; */
  padding-top: 35%;
  overflow: hidden;
}
.type9 .ImgWrap img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
.type9 .textWrap {
  padding: 10px 0px 10px 20px;
  width: 60%;
  display: flex;
  align-items: center;
}
.type13 {
  box-shadow: 0px 0px 5px #ccc;
  margin: 5px;
  margin-bottom: 15px;
  border-radius: 5px;
  width: 97%;
}

.grouptype {
  margin: 0;
  width: 100%;
}
.grouptypeBox {
  margin: 0;
  width: 100%;
  box-shadow: none;
  border-bottom: 1px solid #f2f2f2;
  /* padding: 0; */
}
/* .type13 .ImgWrap {
  width: 43%;
} */
.type13 .textWrap {
  width: 40%;
  padding-left: 10px;
}
.type13 .textWrap p {
  font-size: 12px;
}
.type13 .textWrap p.font-price {
  font-size: 16px;
}
.type13 .textWrap .product_names p.pin {
  color: #999;
  margin-top: 6px;
}
.type13 .textWrap p.pin .pnu {
  color: #ffc700;
  position: relative;
  margin-right: 5px;
}
.type13 .textWrap p.pin .pnu.red {
  color: #999;
}
.type13 .textWrap p.pin .pnu::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  background: #999;
  border-radius: 50%;
  right: -6px;
  top: 6px;
}
.gototuan {
  position: relative;
  /* overflow: hidden; */
  width: 20%;
}
.gototuan .headImg img {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  float: left;
  margin-right: 2px;
}
.gototuan .goContent {
  position: absolute;
  bottom: 10px;
  top: auto;
}
.gototuan .goContent .headImg {
  margin-bottom: 5px;
  overflow: hidden;
}
.gototuan span {
  background: #ffc700;
  font-size: 12px;
  color: #333333;
  padding: 2px 6px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.type9 .textWrap .product_names {
  width: 100%;
}
.type9 .textWrap .product_names > p {
  margin: 3px 0px;
}
.type9 .textWrap .product_names .product_name {
  margin-bottom: 10px;
}
.prod_honeyPrice {
  font-size: 14px;
  color: #333;
}
.prod_honeyPrice > em {
  display: inline-block;
  width: 13px;
  height: 14px;
  background: url(/static/img/honey_black.png) no-repeat center;
  background-size: cover;
  vertical-align: middle;
  margin: 0 3px;
}
.type9 .textWrap .product_names .font-price-type9 {
  margin-top: 20px;
  font-size: 16px;
  margin-bottom: 6px;
}
.product_img.soldout > label {
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 40px;
  top: 50%;
  margin-top: -20px;
  background: url(//files.eyee.com/mcdn/static/img/sneaker/soldout.png)
    no-repeat center;
  background-size: contain;
}

.productItem .sale-count {
  font-size: 10px;
  font-weight: 400;
  color: #999;
  line-height: 14px;
  height:1rem;
  margin-bottom: 12px;
}
.sale-count .point {
  font-style: normal;
  width: 50px;
  /* margin-bottom: 15px; */
  padding: 12px;
  margin-right: -12px;
  text-align: right;
  display: inline-block;
  line-height: 8px;
}
.sale-count .point  i{
  width: 100%;
  display: inline-block;
}
.exchange-price div{
  line-height: 7vw;

}
.exchange-pay-number{
  font-size: 12px;
  width: 100%;
  text-align: right;
  margin-bottom: 4.2667vw
}
.ic_product_more{
  height: 5vw;
  width: 4vw;
  margin-left: 2vw;
}
.exchange-bull{
  text-align: left;
  width: 90%;
}
</style>
